<template>
	<div class="order" v-loading="loading" v-if="tableData.length">
		<div class="order-header" v-if="venueMap[type]">
			<div>所属场馆: {{ venueMap[type].venueName || '-' }}</div>
			<div>
				有效投注重算调整:
				<span
					:style="
						handleNumberColor(venueMap[type].validBetAmountRecal)
					"
				>
					{{
						handleNumber('USDT', venueMap[type].validBetAmountRecal)
					}}
				</span>
			</div>
			<div>
				团队返点可调整额:
				<span
					:style="
						handleNumberColor(venueMap[type].teamRebateAmountRecal)
					"
				>
					{{
						handleNumber(
							'USDT',
							venueMap[type].teamRebateAmountRecal
						)
					}}
				</span>
			</div>
		</div>
		<div v-for="(item, index) in tableData" :key="index">
			<div class="order-list" v-if="item.memberRecalDTOList.length">
				<div
					v-for="(item1, index1) in item.memberRecalDTOList"
					:key="index1"
				>
					<Table :tableData="item1.recordVoList" />
				</div>
			</div>
			<div class="order-list" v-else>
				<Table :tableData="[]" />
			</div>
		</div>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			class="pagination"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</div>
</template>

<script>
import list from '@/mixins/list'
import Table from './table.vue'
export default {
  components: {
    Table
  },
  mixins: [list],
  props: {
    rowData: {
      type: Object,
      default: () => { }
    },
    type: {
      type: String,
      default: ''
    },
    venueMap: {
      type: Object,
      default: () => { }
    },
    venueDetail: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableData: [],
      typeMap: {
        'ty': '体育',
        'zr': '真人',
        'dj': '电竞',
        'cp': '彩票'
      }
    }
  },
  watch: {
    venueDetail(val) {
      this.loadData()
    }
  },
  methods: {
    loadData() {
      let params = {
        memberId: this.venueDetail.memberId,
        proxyId: this.rowData.proxyId,
        recalType: this.rowData.changeStatus,
        reportDate: this.rowData.reportDate,
        startDate: this.rowData.reportDate,
        endDate: this.rowData.reportDate,
        venueCode: this.type
      }
      params = this.getParams(params)
      this.loading = true
      this.$api.reportRecalProxyVenueRecalMemberOrderList(params).then(res => {
        console.log(res)
        this.tableData = res.data.record || []
        this.total = res.data.totalRecord || 0
        this.loading = false
        this.$emit('finish', {
          type: this.type,
          tableData: this.tableData,
          isFinish: true
        })
      }).catch(() => {
        this.loading = false
        this.$emit('finish', {
          type: this.type,
          tableData: [],
          isFinish: true
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order{
    border: 1px solid #EBEEF5;
    margin: 15px 0 30px;
	&:last-child{
		margin-bottom: 0;
	}
    .order-header{
        display: flex;
        background-color: rgb(239, 239, 239);
        height: 40px;
        align-items: center;
        > div{
            flex: 1;
            align-items: center;
            justify-content: center;
            display: flex;
       }
    }

    .order-list{
        padding: 10px;
    }
	.success {
		color: #70B603;
	}
	.error{
		color: #D9001B;
	}
	.pagination{
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}
}

</style>
